import React from "react";
import {useAuth} from "../context/authContext";
import {Button, Form, Input} from "antd";

export const RegisterScreen = ({onError}: {onError: (error: Error) => void}) =>{

    const {register} = useAuth()

    const handleSubmit = async ({cpassword, ...value}: {username: string, password: string, cpassword: string}) =>{
        if(cpassword !== value.password){
            onError(new Error('请确认两次输入的密码相同'))
            return
        }
       try{
            register(value)
        } catch (e){
           onError(e)
       }
    }
    return <Form onFinish={handleSubmit}>
       <Form.Item name={'username'} rules={[{required:true, message:'请输入用户名'}]}>
           <Input placeholder={'请输入用户名'} type={'text'} id={'username'}/>
       </Form.Item>
        <Form.Item name={'password'} rules={[{required:true, message:'请输入密码'}]}>
            <Input placeholder={'请输入密码'} type={'text'} id={'password'}/>
        </Form.Item>
        <Form.Item name={'cpassword'} rules={[{required:true, message:'请确认密码'}]}>
            <Input placeholder={'确认密码'} type={'text'} id={'cpassword'}/>
        </Form.Item>
        <Form.Item>
            <Button type={'primary'} htmlType={"submit"}>注册</Button>
        </Form.Item>
    </Form>
}